<template>
    <el-table :data="newTable" style="width: 100%">
        <el-table-column prop="account" label="用户名字" width="180" />
        <el-table-column prop="password" label="密码" width="180" />
        <el-table-column prop="role.name" label="角色" />
    </el-table>
    <p>{{count}}</p>
    <el-button @click="count++">修改</el-button>
    <p>{{user}}</p>
    <el-button @click="changeUser">修改</el-button>
</template>
  
<script lang="ts" setup>
import { findAllUser } from "@/apis/UserApi"
import { onMounted,computed,watchEffect } from "vue"
const tableData = ref([])
const count = ref(0)
const user = ref({id:1,name:"xiaowang"})

onMounted(() => {
    fetchData()
})

const newTable = computed(()=>{
    return []
})

const changeUser = ()=>{
    user.value = {id:2,name:"xiaofeifei"}
}
//里面用到了哪个变量，默认监控这个变量
watchEffect(()=>{
    console.log("这是watchEffect");
    // const sum = count.value * 2
    // console.log(tempName);
    console.log(user.value);
})


// watch(()=>{
//     return user.value
// },(newVal,oldVal)=>{
//     console.log(newVal,oldVal);
// },{
//     deep:true,
//     immediate:true
// })


const fetchData = async () => {
    const res = await findAllUser()
    console.log(res);
    tableData.value = res.data.data

}
</script>
  